<template>
  <div class="app-container">
    <!-- 搜索筛选操作栏 -->
    <div
      class="filter-container"
      style="border: 1px solid #dcdcdc; padding: 20px; margin-bottom: 20px"
    >
      <span>1390000000</span>
      <span style="margin-left: 60px">下级总数：10</span>
    </div>

    <el-tabs type="border-card">
      <el-tab-pane label="一级">
        <!-- 表格 -->
        <el-table
          :key="tableKey"
          ref="table"
          v-loading="listLoading"
          :data="first"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column
            label="会员账号"
            prop="user"
            align="center"
          />
          <el-table-column label="实名认证" prop="name" align="center" />
          <el-table-column label="成交" header-align="center">
            <template slot-scope="{ row }">
              <div>订单：{{ row.order_num }}</div>
              <div>金额：{{ row.balance || "0.00" }}</div>
            </template>
          </el-table-column>
          <el-table-column label="账户余额" align="center" prop="money" />
          <el-table-column align="center" label="注册时间" prop="created_at" />
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button
                size="mini"
                plain
                type="primary"
                @click="handleLook(row.id)"
              >
                查看会员详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="二级">
        <!-- 表格 -->
        <el-table
          :key="tableKey"
          ref="table"
          v-loading="listLoading"
          :data="second"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column
            label="会员账号"
            prop="user"
            align="center"
          />
          <el-table-column label="实名认证" prop="name" align="center" />
          <el-table-column label="成交" header-align="center">
            <template slot-scope="{ row }">
              <div>订单：{{ row.order_num }}</div>
              <div>金额：{{ row.balance || "0.00" }}</div>
            </template>
          </el-table-column>
          <el-table-column label="账户余额" align="center" prop="money" />
          <el-table-column align="center" label="注册时间" prop="created_at" />
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button
                size="mini"
                plain
                type="primary"
                @click="handleLook(row.id)"
              >
                查看会员详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 分页 -->
    <div v-if="total > 0" style="text-align: right">
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.per_page"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'MemberSubordinate',
  components: {
    Pagination
  },
  directives: {
    waves
  },
  data() {
    return {
      tableKey: 0,
      first: null,
      second: null,
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        per_page: 20
      }
    }
  },
  created() {
    let data = localStorage.getItem('memberDetail')
    if (data) {
      data = JSON.parse(localStorage.getItem('memberDetail'))
      this.first = data.first
      this.second = data.second
    }
  },
  methods: {
    // 查看
    handleLook(id) {
      this.$router.push(`/member/detail/${id}`)
    }
  }
}
</script>
